<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.filter.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
</body>
<script>
  /**
  * 参考 anime
  */
  var draw = SVG().addTo('body').size(800, 600).fill("#232C26") 

  const fcolor = "#00D672";
  const bcolor = "#242d28";
  var rects = [], poss = [];
  const startX= 100, startY = 100, space = 4;
  const rectWidth=18, rectHeight=18;
  const cols = 14; rows = 5;
  function make() {
    for (let i=0; i<rows; i++) {
      for (let j=0; j<cols; j++) {
        const x = startX + j*(rectWidth+space);
        const y = startY + i*(rectHeight+space);
        draw.rect(rectWidth, rectHeight).attr({fill:bcolor}).move(x, y);
        const r =  draw.rect(rectWidth, rectHeight).attr({fill:fcolor}).move(x, y);
        rects.push(r);
        poss.push([x,y]);
      }
    }
  }

  make();

  var aniCount = 0;
  const duration = 1000; 
  function animates() {
    const w = (rectWidth-2)/2
    const h = (rectHeight-2)/2
    const half = cols /2;
    const offset = 100;

    for (var i = 0; i < half; i++) {
      const colOffset = i*offset;
      for (let j =0; j< rows; j++) {

        const rowOffset = Math.abs(j-2) * offset;
        const index = j*cols + half - i- 1;
        const rect1 = rects[index];
        const pos1 = poss[index];
        const x = pos1[0],y = pos1[1];
        
        const ani1 = rect1.animate({
          duration: duration,
          delay: colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0
        }).ease('sineInOut').attr({x:x+w, y:y+h, width:2, height:2});


        ani1.animate({
          duration: duration, 
          delay: duration+colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait:  0,
        }).ease('sineInOut').attr({x:x, y:y, width:rectWidth, height:rectHeight})


        const index2 = j*cols + half+i;
        const rect2 = rects[index2];
        const pos2 = poss[index2];
        const x2 = pos2[0], y2 = pos2[1];

        const ani2 = rect2.animate({
          duration: duration,
          delay: colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0
        }).ease('sineInOut').attr({x:x2+w, y:y2+h, width:2, height:2}) 

        ani2.animate({
          duration: duration,
          delay: duration+colOffset + rowOffset,
          when: 'now',
          swing: false,
          times: 1,
          wait: 0,
        }).ease('sineInOut').attr({x:x2, y:y2, width:rectWidth, height:rectHeight})

      }
    }
  }

  aniloop(animates, 2000);

</script>
</html>